<template>
  <div class="overviewMap">
    <div class="map" id="overviewMap"></div>
  </div>
</template>

<script setup lang="ts">
import Map from "ol/Map.js";
import OSM from "ol/source/OSM.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import { unref, ref, onMounted } from "vue";
import { DragRotateAndZoom, defaults as defaultInteractions } from "ol/interaction.js";
import { OverviewMap, defaults as defaultControls } from "ol/control.js";

const rotateWithView = ref(document.getElementById("rotateWithView"));

const overviewMapControl = new OverviewMap({
  // see in overviewmap-custom.html to see the custom CSS used
  className: "ol-overviewmap ol-custom-overviewmap",
  layers: [
    new TileLayer({
      source: new OSM({
        url: "https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png",
      }),
    }),
  ],
  collapseLabel: "\u00BB",
  label: "\u00AB",
  collapsed: false,
});

// unref(rotateWithView).addEventListener("change", function () {
//   overviewMapControl.setRotateWithView(this.checked);
// });
// 地图
let map: any = ref(null);

const initMap = () => {
  map.value = new Map({
    controls: defaultControls().extend([overviewMapControl]),
    interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    target: "overviewMap",
    view: new View({
      projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
      center: [102.712251, 25.040609], // 昆明坐标
      zoom: 7,
    }),
  });
};

onMounted(() => {
  initMap();
});
</script>

<style lang="scss" scoped>
.overviewMap {
  position: absolute;
  right: 100px;
  bottom: 100px;
  .map {
    height: 200px;
    width: 200px;
  }
}
</style>
